<template>
  <div class="user-order" v-if="userInfo.userLevel!=0">
    <h3 class="order__title">
      <p class="order__title__title">我的仓库</p>
    </h3>
    <div class="order__bd">
      <div v-for="(item,idx) in orderList" :key="idx" class="order__bd__item" @click="handleRouterChange(item)">
        <van-icon :name="item.icon" size="25" color="#dab309" :badge="item.count" />
        <span class="name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { statusCount } from '@/api/order'
import { Toast } from 'vant'
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      orderList: [
        {
          icon: 'pending-payment',
          name: '买方仓库',
          count: '',
          type: 1
        },
        {
          icon: 'pending-payment',
          name: '卖方仓库',
          count: '',
          type: 2
        },
        
        {
          icon: 'pending-payment',
          name: '历史订单',
          count: '',
          type: 4
        },
        {
          icon: 'records',
          name: '我的仓库',
          count: '',
          type: 3
        },
      ]
    }
  },
  computed:{
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // statusCount().then(res => {
      //   // this.orderList[0].count = res.map.unpaid || ''
      //   // this.orderList[1].count = res.map.unship || ''
      //   // this.orderList[2].count = res.map.unrecv || ''
      //   // this.orderList[3].count = res.map.uncomment || ''
      // })
    },
    handleRouterChange(record) {
      const type = record.type
      if (type <= 2) {
        this.$router.push({ path: `/user/order/warehouseList/${type}`, query: { type }})
        return
      } else if (type === 3) {
        // if (type == 3)
        // Toast.clear('开发中')
        this.$router.push({ path: `/user/order/preList` })
      } else {
        this.$router.push({ path: '/user/order/preAllList' })
      }
    }
  }
}
</script>

<style>
:root {
  --user-order-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
}
</style>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.user-order {
  width: 702px;
  height: 268px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow); // 这里使用 css 函数，是为了避免旧版本 vue-cli 依赖的 css 压缩工具（mini-css-extract-plugin）导致的 bug
  border-radius: 24px;
  margin-top: 42px;
  .order__title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 34px 24px 34px 34px;
    .order__title__title {
      font-size: 36px;
      font-weight: 500;
      color: $black;
    }
    .order__title__navigate {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 6px;
      span {
        font-size: 26px;
        font-family: PingFangSC;
        font-weight: 400;
        color: $gray;
        margin-right: 10px;
      }
    }
  }
  .order__bd {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 46px;
    .order__bd__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 14px;
      .name {
        font-size: 26px;
        color: $gray;
        margin-top: 16px;
      }
    }
  }
}
</style>
